<template>
	<view class="r-box">
		<uni-popup ref="popup" type="center">
			<view class="r_c" @click="close">
				<view class="r-b">
					<image class="r-b-img" src="https://img.jinghushi.com/images/0/2025/10/te2gRBmm3emqqg2dwIw3W3wb8mRgIM.png" mode="widthFix"></image>
					<text class="coent">{{info.content}}</text>
				</view>
				<image class="bg" src="https://img.jinghushi.com/jinbiyu.gif" ></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					content: ''
				}
			}
		},
		// mounted() {
		// 	this.open()
		// },
		methods: {
			open(val) {
				this.info = val
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.r-box {
		.r_c {

			position: relative;

			.r-b {
				position: relative;
				width: 678rpx;

				.r-b-img {
					width: 100%;
					height: calc(1766rpx /2);
				}

				.coent {
					position: absolute;
					// top: calc(1766rpx /2 *0.65);
					top: 432rpx;
					left: 0;
					font-size: 32rpx;
					width: 100%;
					text-align: center;
					font-weight: bold;
					letter-spacing: 2rpx;
					font-family: "Arial Rounded MT Bold", "Helvetica Rounded", "Microsoft YaHei", sans-serif;
					font-weight: bold;
					line-height: 1.2;
					letter-spacing: 0.5px;
					/* 略微增加字间距，增强圆润感 */

					/* 圆润过渡的金属渐变 */
					background: linear-gradient(135deg,
							#fff9e6 10%,
							/* 高光 */
							#ffe699 30%,
							/* 亮金属色 */
							#ffd740 55%,
							/* 主金色 */
							#ffc107 80%,
							/* 暗面金色 */
							#ffe699 95%
							/* 边缘反光 */
						);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;

					/* 柔和的阴影效果，增强圆润感 */
					text-shadow:
						1px 1px 1px rgba(184, 134, 11, 0.25),
						/* 轻微暗阴影 */
						-1px -1px 1px rgba(255, 255, 245, 0.6),
						/* 柔和高光 */
						0 0 2px rgba(255, 215, 0, 0.25);
					/* 弱化泛光 */

					/* 滤镜调整，增强圆润柔和感 */
					filter:
						brightness(1.05) contrast(1.1) saturate(1.05);
				}
			}



			.bg {
				position: absolute;
				top: -100rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 694rpx;
				height: calc(1766rpx *0.55);
			}
		}

	}
</style>